<!-- page content -->
<div id="vueIndex" class="right_col" role="main" xmlns:v-bind="http://www.w3.org/1999/xhtml"
     xmlns:v-model="http://www.w3.org/1999/xhtml">
    <h3>This is vue index..</h3>

    <!-- 单向绑定 v-bind -->
    <!-- 双向绑定 v-model -->

    <p>{{title}}</p>
    <p>userName: <input v-bind:value="user.userName" /></p>
    <p>userName: <input v-model:value="user.userName" /></p>
    <select>
        <option v-for="(city, index) in cities" v-bind:value="city.id">{{city.cityName}}</option>
    </select>
    <p><input type="button" value="test1" @click="test_1()" /></p>
</div>

<script>
    var vueTest = new Vue({
        <!-- 设置3个属性 -->
            /* el --作用页面
            *  data --定义模型
            *  methods --方法
            */
        el: "#vueIndex",
        data: {
            title: "Vue index",
            user: {
                userName: "Piaoyi",
                age: 18,
            },
            cities: [
                { id: 1, cityName: "北京" },
                { id: 2, cityName: "上海" },
                { id: 3, cityName: "广州" },
                { id: 4, cityName: "深圳" },
                { id: 5, cityName: "成都" },
            ],
        },
        methods: {
            test_1: function () {
                alert("Hello World");
            },
        },
    });
</script>